<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-setting"></i> 贷款分类 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-tabs v-model="activeName" @tab-click="classclick">
        <el-tab-pane label="产品分类" name="1"></el-tab-pane>
        <el-tab-pane label="贷款类型" name="2"></el-tab-pane>
        <el-tab-pane label="针对用户" name="3"></el-tab-pane>
        <el-tab-pane label="贷款用途" name="4"></el-tab-pane>
        <el-tab-pane label="贷款期限" name="5"></el-tab-pane>
        <el-tab-pane label="还款方式" name="6"></el-tab-pane>
        <el-tab-pane label="产品特色" name="7"></el-tab-pane>
      </el-tabs>
      <div class="handle-box">
        <el-button type="primary" class="handle-del mr10" @click="addClick">新增</el-button>
        <el-input placeholder="请输入名称查询" class="handle-input mr10" v-model="query.sou"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
      </div>
      <el-table :data="tableData" v-loading="listload" border class="table" style="width: 100%" ref="multipleTable"
                header-cell-class-name="table-header">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="ptName" label="名称">
          <template slot-scope="scope">
            {{scope.row.typeName ? scope.row.typeName + '->' :''}}{{scope.row.ptName}}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="editClick(scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="delClick(scope.row.ptId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.totalCount"
                       :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
      </div>
      <!-- 添加类别 -->
      <el-dialog title="添加类别" :visible.sync="form.flg" width="30%">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="产品分类" v-if="activeName == '2'">
            <el-select v-model="form.classStr" placeholder="请选择产品分类" style="width:100%;">
              <el-option v-for="item in classArr" :key="item.ptId" :label="item.ptName" :value="item.ptId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类别名称">
            <el-input v-model="form.name" placeholder="请输入类别名称"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="form.flg = false">取 消</el-button>
          <el-button type="primary" @click="classSub" :loading="form.load">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  webDclassInit, webDclassAdd, webDclassEdit, webDclassDel
} from '../../../api/index';
export default {
  data() {
    return {
      listload: false,
      tableData: [],
      classArr: [],
      activeName: '1',
      query: {
        page: 1,
        limit: 10,
        sou: '',
        totalCount: 0,
      },
      form: {
        editId: '',
        flg: false,
        load: false,
        name: '',
        classStr: '',
      },
    }
  },
  created() {
    this.getinit();
    this.classgetinit();
  },
  methods: {
    //初始化
    getinit() {
      this.listload = true;
      webDclassInit({
        page: this.query.page,
        limit: this.query.limit,
        type: this.activeName,
        kw: this.query.sou,
      }).then(res => {
        this.listload = false;
        if (res.code == 0) {
          this.tableData = res.recordList;
          this.query.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //产品分类初始化
    classgetinit() {
      webDclassInit({
        page: 1,
        limit: 1000000,
        type: '1',
        kw: '',
      }).then(res => {
        if (res.code == 0) {
          this.classArr = res.recordList;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //新增
    addClick() {
      this.form.flg = true;
      this.form.editId = '';
      this.form.name = '';
      this.form.classStr = '';
    },
    //编辑
    editClick(item) {
      if (this.activeName == '2') {
        this.form.classStr = item.parentId;
      } else {
        this.form.classStr = '';
      }
      this.form.name = item.ptName;
      this.form.flg = true;
      this.form.editId = item.ptId;
    },
    //删除
    delClick(id) {
      this.$confirm('确定要删除此项分类吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        webDclassDel({
          id: id
        }).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功');
            this.getinit();
          } else {
            this.$message(res.msg);
          }
        })
      })
    },
    //点击切换分类
    classclick() {
      this.query.page = 1;
      this.getinit();
      this.classgetinit();
    },
    //列表序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //翻页
    PageChange(page) {
      this.query.page = page;
      this.getinit();
    },
    //搜索
    souClick() {
      this.getinit();
    },
    //新增编辑提交
    classSub() {
      this.form.load = true;
      if (this.form.editId) {
        webDclassEdit({
          ptId: this.form.editId,
          ptType: this.activeName,
          ptName: this.form.name,
          parentId: this.form.classStr
        }).then(res => {
          this.form.load = false;
          if (res.code == 0) {
            this.$message.success('编辑成功');
            this.form.flg = false;
            this.getinit();
          } else {
            this.$message(res.msg);
          }
        })
      } else {
        webDclassAdd({
          ptType: this.activeName,
          ptName: this.form.name,
          parentId: this.form.classStr
        }).then(res => {
          this.form.load = false;
          if (res.code == 0) {
            this.$message.success('添加成功');
            this.form.flg = false;
            this.getinit();
          } else {
            this.$message(res.msg);
          }
        })
      }
    }
  }
}
</script>
<style scoped>
.handle-input {
    width: 300px;
    display: inline-block;
}
.red {
    color: red;
}
</style>